<template>
  <div>
    <DialogStyle>
      <el-dialog
        title="新增合作商"
        :visible="dialogVisible"
        width="750px"
        :close-on-click-modal="false"
        @close="dialogClose"
      >
        <!-- 表单内容 -->
        <el-form ref="deptRef" :rules="deptRules" :model="formData" label-width="150px" style="padding-left:100px">
          <el-form-item prop="name" label="合作商名称：">
            <el-input v-model="formData.name" placeholder="请输入" style="width:400px" show-word-limit maxlength="10" />
          </el-form-item>
          <el-form-item prop="contact" label="联系人：">
            <el-input v-model="formData.contact" placeholder="请输入" style="width:400px" show-word-limit maxlength="10" />
          </el-form-item>
          <el-form-item prop="mobile" label="联系电话：">
            <el-input v-model="formData.mobile" placeholder="请输入" style="width:400px" show-word-limit maxlength="11" />
          </el-form-item>
          <el-form-item prop="num" label="分成比例(%)：">
            <el-input-number v-model="num" controls-position="right" placeholder="请输入" :min="min" :max="100" style="width:396px" />

          </el-form-item>
          <el-form-item prop="account" label="账号：">
            <el-input v-model="formData.account" placeholder="请输入" style="width:400px" show-word-limit maxlength="18" />
          </el-form-item>
          <el-form-item prop="password" label="密码：">
            <el-input v-model="formData.password" placeholder="请输入" style="width:400px" show-word-limit maxlength="20" />
          </el-form-item>
        </el-form>
        <!-- 底部按钮 -->
        <span slot="footer" class="dialog-footer">
          <el-button style="margin-right:50px" @click="dialogClose">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </el-dialog>
      <DialogStyle /></dialogstyle></div>
</template>

<script>
import { addPartner } from '@/api'
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    rowScendList: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      formData: {
        account: '',
        contact: '',
        mobile: '',
        name: '',
        password: ''
      },
      num: '',
      min: '',
      deptRules: {
        name: [
          { required: true, message: '请输入', trigger: ['blur', 'change'] },
          { min: 1, max: 10, message: '请输入不超过10个字符', trigger: ['blur', 'change'] }
        ],
        contact: [
          { required: true, message: '请输入', trigger: ['blur', 'change'] },
          { min: 1, max: 10, message: '请输入不超过10个字符', trigger: ['blur', 'change'] }
        ],
        mobile: [
          { required: true, message: '请输入', trigger: ['blur', 'change'] },
          { pattern: /^1[3-8][0-9]{9}$/, message: '请输入正确的手机号码', trigger: ['blur', 'change'] }
        ],
        num: [
          { message: '请输入', trigger: ['blur', 'change'] }
        ],
        account: [
          { required: true, message: '请输入', trigger: ['blur', 'change'] },
          { min: 1, max: 18, message: '请输入不超过10个字符', trigger: ['blur', 'change'] }
        ],
        password: [
          { required: true, message: '请输入', trigger: ['blur', 'change'] },
          { min: 1, max: 20, message: '请输入不超过10个字符', trigger: ['blur', 'change'] }

        ]
      }
    }
  },
  methods: {
    // 关闭弹窗
    dialogClose() {
      this.$emit('closeInsideWord')
      this.$refs.deptRef.resetFields()
      this.num = ''
      this.formData = {
        account: '',
        contact: '',
        mobile: '',
        name: '',
        password: ''
      }
    },
    // 新增区域
    async submit() {
      this.$refs.deptRef.validate(async valid => {
        if (!valid) return
        try {
          await addPartner({
            ...this.formData,
            ratio: this.num })
          this.$message.success('新增成功')
          this.$emit('fetchListFn')
          this.dialogClose()
        } catch (err) {
          this.$message.warning('新增失败', err)
        }
      })
    }
  }
}
</script>

<style>
.dialog-footer{
  margin-right: 250px;
}
</style>
